<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./script/Cesium/Cesium.js"></script>
    <link rel="stylesheet" href="./script/Cesium/Widgets/widgets.css" />
    <style>
      html,
      body {
        height: 100%;
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <div id="cesiumContainer" style="width: 100%"></div>
    <script>
      const viewer = new Cesium.Viewer("cesiumContainer", {
        // baseLayerPicker: false,
        // navigationHelpButton: false,
        // sceneModePicker: false,
        terrainProvider: Cesium.createWorldTerrain(),
        baseLayerPicker: false,
        shouldAnimate: true,
      });

      function getCzml() {
        const czml = [
          {
            id: "document",
            name: "CZML Path",
            version: "1.0",
            clock: {
              interval: "2012-08-04T10:00:00Z/2012-08-04T10:01:00Z",
              currentTime: "2012-08-04T10:00:00Z",
              multiplier: 10,
            },
          },
          {
            id: "launchvehicle",
            name: "launchvehicle box",
            position: {
              cartographicDegrees: [-114.0, 40.0, 300000.0],
            },
            model: {
              gltf: "./assets/launchvehicle.glb",
              scale: 2.0,
              minimumPixelSize: 128,
              runAnimations: false,
              color: {
                rgba: [102, 255, 255, 128],
              },
            },
          },
          {
            id: "airOne",
            name: "airOne box with black outline",
            position: {
              cartographicDegrees: [-107.0, 40.0, 300000.0],
            },
            model: {
              //gltf: "https://assets.agi.com/models/launchvehicle.glb",
              gltf: "./assets/SampleData/models/CesiumAir/Cesium_Air.glb",
              scale: 2.0,
              minimumPixelSize: 128,
              runAnimations: false,
              color: {
                rgba: [255, 0, 0, 128],
              },
            },
          },
          {
            id: "airTwo",
            name: "airTwo box with black outline",
            position: {
              cartographicDegrees: [-100.0, 40.0, 300000.0],
            },
            model: {
              //gltf: "https://assets.agi.com/models/launchvehicle.glb",
              gltf: "./assets/SampleData/models/CesiumAir/Cesium_Air.glb",
              scale: 2.0,
              minimumPixelSize: 128,
              runAnimations: false,
              color: {
                rgba: [255, 255, 0, 128],
              },
            },
          },
          {
            id: "point 1",
            name: "point",
            position: {
              cartographicDegrees: [-105.0, 40.0, 300000],
            },
            point: {
              color: {
                rgba: [255, 255, 255, 255],
              },
              outlineColor: {
                rgba: [255, 0, 0, 255],
              },
              outlineWidth: 4,
              pixelSize: 20,
            },
          },
          {
            id: "path",
            name: "path with GPS flight data",
            description:
              "<p>Hang gliding flight log data from Daniel H. Friedman.<br>Icon created by Larisa Skosyrska from the Noun Project</p>",
            availability: "2012-08-04T10:00:00Z/2012-08-04T10:01:00Z",
            path: {
              material: {
                polylineOutline: {
                  color: {
                    rgba: [255, 0, 255, 255],
                  },
                  outlineColor: {
                    rgba: [0, 255, 255, 255],
                  },
                  outlineWidth: 5,
                },
              },
              width: 8,
              leadTime: 10,
              trailTime: 1000,
              resolution: 5,
            },
            billboard: {
              image:
                "",
              scale: 1.5,
              eyeOffset: {
                cartesian: [0.0, 0.0, -10.0],
              },
            },
            position: {
              epoch: "2012-08-04T10:00:00Z",
              cartographicDegrees: [
                0,
                -114.9385,
                39.50935,
                300000,
                10,
                -112.9385,
                39.50935,
                300000,
                20,
                -110.9385,
                39.50935,
                300000,
                30,
                -108.9385,
                39.50935,
                300000,
                40,
                -108.9385,
                34.50935,
                300000,
                50,
                -108.9385,
                32.50935,
                200000,
              ],
            },
          },
        ];
        return czml;
      }

      function startUp2() {
        console.log("x");
        const czml = getCzml();

        const dataSourcePromise = Cesium.CzmlDataSource.load(czml);
        dataSourcePromise.then((dataSource) => {
          const entity = dataSource.entities.getById("launchvehicle");

          console.log(entity);

          viewer.trackedEntity = ds.entities.getById("path");

          //setRotate(entity, { rotateX: 100, rotateY: 100, rotateZ: 100 });
          //update3dtilesMaxtrix(entity);
          setModelMatrix(entity);
        });
        viewer.dataSources.add(dataSourcePromise);
        viewer.zoomTo(dataSourcePromise);
      }

      startUp2();

      function startUp() {
        const czml = getCzml();
        viewer.dataSources
          .add(Cesium.CzmlDataSource.load(czml))
          .then(function (ds) {
            //viewer.trackedEntity = ds.entities.getById("path");
          });
      }

      startUp();
    </script>
  </body>
</html>
